{% extends 'game_core/base.html' %}
{% load static %}

{% block content %}
<div class="battle-container">
    <!-- 玩家信息 -->
    <div class="player-info">
        <div class="character-avatar">
            <img src="{% static 'images/character.png' %}" alt="角色">
        </div>
        <div class="character-stats">
            <div class="hp-bar">
                <div class="hp-fill" style="width: {{ character.current_hp|percentage:character.base_hp }}%"></div>
                <span>HP: {{ character.current_hp }}/{{ character.base_hp }}</span>
            </div>
            <div class="stats">
                <p>攻击力: {{ character.base_attack }}</p>
                <p>防御力: {{ character.base_defense }}</p>
            </div>
        </div>
    </div>

    <!-- 战斗区域 -->
    <div class="battle-area">
        <div class="monster-info">
            <img src="{% static 'images/monster/'|add:monster.name|add:'.png' %}" alt="{{ monster.name }}">
            <div class="monster-hp-bar">
                <div class="hp-fill" id="monster-hp-fill" style="width: 100%"></div>
                <span id="monster-hp">HP: {{ monster.hp }}/{{ monster.hp }}</span>
            </div>
        </div>
    </div>

    <!-- 操作区域 -->
    <div class="action-area">
        <button id="attack-btn" class="action-btn">普通攻击</button>
        {% for skill in character.characterskill_set.all %}
            {% if skill.is_equipped %}
                <button class="skill-btn" data-skill-id="{{ skill.id }}">
                    {{ skill.skill.name }}
                </button>
            {% endif %}
        {% endfor %}
    </div>

    <!-- 战斗日志 -->
    <div class="battle-log">
        <ul id="battle-messages"></ul>
    </div>
</div>

<script src="{% static 'js/battle.js' %}"></script>
{% endblock %} 